<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <input type="text" />
    <nav></nav>
    <script>
      const seach = document.querySelector("input");
      const nav = document.querySelector("nav");
      seach.onkeyup = async function () {
        if (this.value) {
          try {
            const { data } = await axios.get(
              "http://localhost:3000/data/search",
              {
                params: {
                  keyword: this.value,
                },
              }
            );
            nav.innerHTML = "";
            getlist(data);
          } catch (e) {
            console.log(e);
          }
        } else {
          nav.innerHTML = "";
        }
      };
      function getlist(data) {
        for (let i = 0; i < data.length; i++) {
          if (data[i]) {
            nav.innerHTML += `<p>${data[i]}</p>`;
          }
        }
      }
    </script>
  </body>
</html>
